<template>
  <div class="discovery">
    <!-- 轮播 -->
   <div class="swper">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in bannerinfo" :key="item.id">
        <img :src="item.imageUrl" >
      </el-carousel-item>
    </el-carousel>
  </div>
  <!-- 推荐歌单 -->
  <h2>推荐歌单</h2>
  <div class="recommend" >
      <div v-for="(item) in recommendinfo" :key="item.id" @click="detail(item.id)" class="recommenditem">
     <img :src="item.picUrl">
     <p>{{item.name}}</p>
   </div>
  </div>
  <!-- 最新音乐 -->
  <h2>最新音乐</h2>
  <div class="newsmusic">
    <div v-for="(item) in newsmusiclist" :key="item.id" class="itemmusic">  
      <div>
        <img :src='item.picUrl' class="image" @click="palyer(item.id)">
      </div>
      <div class="content">
        <p>{{item.name}}</p>
        <div>
          <span v-for="item in item.song.artists" :key="item.id">
               {{item.name}}
          </span>
        </div>
      </div>
    </div>
  </div>
  <!-- 推荐MV -->
  <h2>推荐MV</h2>
  <div class="mvallinfo">
     <div v-for="item in mvlist" :key='item.id' class="mvallitem" >
     <div>
       <img :src="item.picUrl" @click="playermv(item.id)">
     </div>
     <div>
       <p>{{item.copywriter}}</p>
       <p>{{item.artistName}}</p>
     </div>
  </div>
  </div>

 </div>
</template>

<script>
  export default {
    name:'discovery',
    data () {
      return {
        bannerinfo:[],
        recommendinfo:[],
        newsmusiclist:[],
        mvlist:[]
      }
    },
    created () {
      this.getbannerinfo()
      this.getmusicinfo()
      this.getnewsmusic()
      this.mvlistinfo()
    },
    methods: {
      //获取轮播数据
      async getbannerinfo(){
        let res = await this.$http.get('banner')
        this.bannerinfo = res.data.banners
        // console.log(this.bannerinfo)
      },
      //获取歌单数据
      async getmusicinfo(){
        let res = await this.$http.get('personalized',{params:{limit:10}})
        // console.log(res)
        this.recommendinfo =res.data.result
      },
      //跳转详情页
      detail(id){
        this.$router.push(`/playlist?id=${id}`)
      },
     //最新音乐数据
     async getnewsmusic(){
       let res =await this.$http.get('personalized/newsong')
      //  console.log(res)
       this.newsmusiclist =res.data.result
     },
     //播放音乐
     async palyer(id){
      let res =await this.$http.get('song/url',{params:{id}})
      // const
      this.$parent.player = res.data.data[0].url
     },
     //推荐mv数据
     async mvlistinfo(){
       let res =await this.$http.get('personalized/mv')
       console.log(res)
       this.mvlist =res.data.result
     },
    //  播放mv
    async playermv(id){
      this.$router.push(`/mv?id=${id}`)
    }
    }    
  }
</script>

<style lang="less">
.discovery{
  
  margin-top: 50px;
 .swper{
   width: 1000px;
   margin: 80px auto;
   
   img{
     width: 100%;
     height: 100%;
     border-radius: 10px;
   }
 }
 .recommend{
   margin: 0 auto;
   width: 1000px;
   display: flex;
   flex-wrap: wrap;
   .recommenditem{
     margin:  10px ;
     width: 180px;
     img{
       width: 180px;
       height: 180px;
       border-radius: 5px;
     }
   }
 
 }
 h2{
   margin-left: 250px;
 }
  .newsmusic{
    margin: 20px 0  20px 230px;
    display: flex;
    flex-wrap: wrap;
    .itemmusic{
      margin: 15px 0 0 50px;
      width: 500px;
      display: flex;
    .image{
      width: 100px;
      height: 100px;
    }
    }
    .content{
      margin-left: 20px;
      line-height: 35px;
      p{
        font-weight: bolder;
      }
    }
  }
  .itemmusic:hover{
    background-color: #eee;
  }
  .mvallinfo{
    position: absolute;
    display: flex;
    margin: 20px 0  100px  230px;
  
    .mvallitem{
      width: 240px;
      margin-left: 30px;
      img{
        width: 240px;
        height: 150px;
        border-radius: 5px;
      }
    }
  }
}
</style>